<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-09-16 21:10:45
 * @LastEditTime: 2023-10-22 22:08:01
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/views/main/asset/views/statistics-detail.vue
 -->
<template>
  <div class="statistic-detail">
    <group>
      <tab :line-width="2" active-color="rgb(80, 119, 185)" custom-bar-width="60px">
        <tab-item :selected="activeIndex == 1" @on-item-click="handler(1)"
          >全院资产</tab-item
        >
        <tab-item :selected="activeIndex == 2" @on-item-click="handler(2)">
          <popup-picker
            :key="1"
            :data="classList"
            show-name
            v-model="classId"
            @on-change="changeList"
            text-align="center"
          ></popup-picker>
        </tab-item>
      </tab>
    </group>
    <div class="assets-list">
      <div
        class="assets-item"
        @click="toAssetsLog(item.assetId)"
        v-for="(item, index) in assetsList"
        :key="index"
      >
        <div>{{ item.assetName }}</div>
        <div>数字资产ID: {{ item.assetCode }}</div>
        <div>使用人: {{ item.useName || item.useId }}</div>
        <x-icon class="more" type="ios-arrow-right" size="16"></x-icon>
      </div>
    </div>
  </div>
</template>

<script>
import AssetApi from "@/api/asset.js";
import { Tab, TabItem, PopupPicker, Group } from "vux";
export default {
  components: {
    Tab,
    TabItem,
    PopupPicker,
    Group,
  },
  data() {
    return {
      activeIndex: 1,
      assetsList: [],
      classList: [[]],
      classId: [],
    };
  },
  mounted() {
    this.assetClass();
    if (this.$route.query.classId) {
      this.activeIndex = 2;
      this.classId = [this.$route.query.classId];
    } else {
      this.activeIndex = 1;
    }
    this.getFindClassAll();
  },
  methods: {
    async getFindClassAll() {
      let _params = {
        classId: this.activeIndex == 1 ? "" : this.classId[0],
        page: 1,
        pageSize: 1000,
      };
      let {
        data: { records },
      } = await AssetApi.findClassAll(_params);
      this.assetsList = records;
      console.log(75, this.assetsList);
    },
    toAssetsLog(id) {
      this.$router.push({ 
        name: 'log', 
        params: { 
            id: id, 
            edit: false,
        } 
      });
      // this.$router.push({
      //   path: "log",
      //   query: {
      //     id: id,
      //     edit: false,
      //   },
      // });
    },
    handler(index) {
      this.activeIndex = index;
      this.getFindClassAll();
    },
    changeList() {
      this.getFindClassAll();
    },
    assetClass() {
      let _params = {
        pageNum: 1,
        pageSize: 1000,
      };
      AssetApi.assetClass(_params).then((res) => {
        if (res.code == "0000") {
          let _classList =
            res.data.records.map((item) => {
              let temp = {
                name: item.name,
                value: item.id.toString(),
              };
              return temp;
            }) || [];
          _classList.unshift({ name: "所有分类", value: "" });
          this.classList = [_classList];
        }
      });
    },
  },
};
</script>
<style lang="less">
/deep/.statistic-detail {
  .vux-popup-picker-select {
    text-align: center !important;
  }
}
</style>
<style lang="less" scoped>
.statistic-detail {
  /deep/.weui-cell {
    .vux-popup-picker-select {
      text-align: center !important;
    }
  }
  /deep/.weui-cell_access {
      .weui-cell__ft:after {
        border-width: 0px 2px 2px 0 !important;
      }
    }
}
.assets-list {
  background: #fff;
  padding: 10px;
  .assets-item {
    border-radius: 8px;
    padding: 5px 15px;
    color: #666;
    background: #f1f1f1;
    margin-top: 10px;
    line-height: 24px;
    font-size: 13px;
    position: relative;
    > :nth-child(1) {
      font-size: 14px;
      color: #333;
      line-height: 30px;
    }
    .more {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
}
</style>
